<!DOCTYPE html>

<script src="../../../resources/js-test.js"></script>

<div id="sandbox"></div>

<script>
var sandbox = document.getElementById("sandbox");

function cleanUp()
{
    sandbox.innerHTML = "";
}

description("Test dynamically changing sibling rule matches in ShadowRoots");

debug("Dynamically change the :first-child");
var host = sandbox.appendChild(document.createElement("div"));
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<span>Black</span><style>:first-child { color: red; }</style>";
document.body.offsetTop;
var second = root.firstElementChild;
var first = root.insertBefore(document.createElement("span"), second);
first.textContent = "Red";
shouldBeEqualToString("getComputedStyle(first).color", "rgb(255, 0, 0)");
shouldBeEqualToString("getComputedStyle(second).color", "rgb(0, 0, 0)");

cleanUp();

debug("Dynamically change the :last-child");
var host = sandbox.appendChild(document.createElement("div"));
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<style>:last-child { color: red; }</style><span>Black</span>";
document.body.offsetTop;
var secondToLast = root.lastElementChild;
var last = root.appendChild(document.createElement("span"));
last.textContent = "Red";
shouldBeEqualToString("getComputedStyle(last).color", "rgb(255, 0, 0)");
shouldBeEqualToString("getComputedStyle(secondToLast).color", "rgb(0, 0, 0)");

cleanUp();

debug("Dynamically change what a + combinator matches");
var host = sandbox.appendChild(document.createElement("div"));
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<div></div><span>Black</span><style>div + span { color: red; }</style>";
document.body.offsetTop;
var div = root.firstElementChild;
var span = div.nextElementSibling;
div.remove();
shouldBeEqualToString("getComputedStyle(span).color", "rgb(0, 0, 0)");

cleanUp();

debug("Dynamically change what a ~ combinator matches");
var host = sandbox.appendChild(document.createElement("div"));
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<div></div><span>Black</span><style>div ~ span { color: red; }</style>";
document.body.offsetTop;
var div = root.firstElementChild;
var span = div.nextElementSibling;
div.remove();
shouldBeEqualToString("getComputedStyle(span).color", "rgb(0, 0, 0)");

cleanUp();

</script>
